<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" type="text/css" href="./Help.css" />
    <script type="text/javascript" src="./help.js"></script>
  </head>
  <body>
    <h1>Backgrounds</h1>
    <p>
      Each of your scenes requires a background image that defines how your
      scene should look. Add backgrounds to your game by adding PNG files to
      your project's
      <em>assets/backgrounds</em> folder.
    </p>
    <h2>Requirements</h2>
    <p>
      Background PNGs must only contain the following four colors:<br />
      <span class="HelpSwatch" style="background-color: #071821"></span>
      #071821,
      <span class="HelpSwatch" style="background-color: #306850"></span>
      #306850,
      <span class="HelpSwatch" style="background-color: #86c06c"></span>
      #86c06c and
      <span class="HelpSwatch" style="background-color: #e0f8cf"></span>
      #e0f8cf.<br />
      Colors that are not one of these hex codes will be matched to the nearest
      color.
    </p>
    <p>
      Backgrounds are divided into <strong>8x8px</strong> tilesets so the total
      image size must be a multiple of <strong>8px</strong> in both width and
      height. A background has a minimum size of <strong>160x144px</strong> (the
      screen size) and currently a background can be no larger than
      <strong>256x256px</strong>.
    </p>
    <p>
      An image can contain no more than <strong>192</strong> unique
      <strong>8x8px</strong> tiles at once due to memory limits. This means that
      even using the smallest background size possible you must repeat about
      half of your tiles. Where possible repeat tiles between images as they
      will be grouped together saving on total game size. It is recommended to
      use a tile map editor such as
      <a href="#" onclick="openUrl('https://www.mapeditor.org/')">Tiled</a> to
      ensure your backgrounds conform to the pixel grid.
    </p>
  </body>
</html>
